<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css"/>
    <link href="../lib/step-lc/step.css" rel="stylesheet">
    <style>
        body {
            padding: 16px;
        }

        #StepWrapper_wrapper .tip {
            margin-top: 8px;
        }

        #lineForm .layui-form-label {
            width: 140px;
        }

        .tip-container {
            background: #66CC99;
            margin: 30px 16px 16px 16px;
            border-radius: 8px;
            color:white;
            font-size: 1.6rem;
        }

        .countdown-time{
            font-size: 3rem;
        }

    </style>
</head>
<body>
<div id="StepWrapper_wrapper">
    <div id="StepWrapper" style="width: 692.392px;">
        <div class="s-step" style="width: 600px;">
            <div class="s-circle  active">
                <div class="s-num">1</div>
                <div class="tip" style="width: 92.3924px;">设备</div>
            </div>
            <div class="s-line" style="width: calc((100% - 6rem) / 3);"></div>
            <div class=" s-circle  ">
                <div class="s-num">2</div>
                <div class="tip" style="width: 92.3924px;">线路</div>
            </div>
            <div class="s-line" style="width: calc((100% - 6rem) / 3);"></div>
            <div class=" s-circle  ">
                <div class="s-num">3</div>
                <div class="tip" style="width: 92.3924px;">入网</div>
            </div>
            <div class="s-line" style="width: calc((100% - 6rem) / 3);"></div>
            <div class=" s-circle  ">
                <div class="s-num">4</div>
                <div class="tip" style="width: 92.3924px;">结果</div>
            </div>
        </div>
    </div>
    <div id="StepWrapper_content" style="width: 700px;">
        <div class="layui-carousel" id="Content_Main" lay-anim=""
             style="width: 100%; height: 400px;">
            <div id="Carousel_item" carousel-item="">
                <div class="item  layui-this">
                    <div style="padding-top:40px;padding-right: 3em;">
                        <form class="layui-form" action="">
                            <div class="layui-form-item"><label
                                    class="layui-form-label">设备类型</label>
                                <div class="layui-input-block">
                                    <select name="type" lay-verify="required">
                                        <option value="0">单键开关面板</option>
                                        <option value="1">双键开关面板</option>
                                        <option value="2">三键开关面板</option>
                                        <option value="3">窗帘电机</option>
                                        <option value="4">空调控制器(PG-ZIGBEE)</option>
                                        <option value="5">空调控制器(LK-ZIGBEE)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button lay-submit="" lay-filter="typeSubmit"
                                            class="layui-btn layui-btn-sm layui-btn-normal">下一步
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="item">
                    <div style="padding-top:20px;padding-right: 3em;">
                        <div class="line-container">
                            <form class="layui-form" action="" id="lineForm"
                                  style="height: 380px;overflow: auto;">
                                <div class="layui-form-item"><label class="layui-form-label">第一路(地址位01）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text"
                                               name="line1"
                                               placeholder="请输入第一路电路别称，默认名称第一路"
                                               autocomplete="off"
                                               style="flex: 1;margin-right: 8px;"
                                               class="layui-input"/>
                                        <input
                                                type="checkbox" name="check1" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item"><label class="layui-form-label">第二路(地址位02）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text" name="line2"
                                               placeholder="请输入第二路电路别称，默认名称第二路"
                                               autocomplete="off" class="layui-input"
                                               style="flex: 1;margin-right: 8px;"/>
                                        <input
                                                type="checkbox" name="check2" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item"><label class="layui-form-label">第三路(地址位03）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text" name="line3"
                                               placeholder="请输入第三路电路别称，默认名称第三路"
                                               autocomplete="off" class="layui-input"
                                               style="flex: 1;margin-right: 8px;"/>
                                        <input
                                                type="checkbox" name="check3" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item"><label class="layui-form-label">第四路(地址位04）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text" name="line4"
                                               placeholder="请输入第四路电路别称，默认名称第四路"
                                               autocomplete="off" class="layui-input"
                                               style="flex: 1;margin-right: 8px;"/>
                                        <input
                                                type="checkbox" name="check4" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item"><label class="layui-form-label">第五路(地址位05）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text" name="line5"
                                               placeholder="请输入第五路电路别称，默认名称第五路"
                                               autocomplete="off" class="layui-input"
                                               style="flex: 1;margin-right: 8px;"/>
                                        <input
                                                type="checkbox" name="check5" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item"><label class="layui-form-label">第六路(地址位06）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text" name="line6"
                                               placeholder="请输入第六路电路别称，默认名称第六路"
                                               autocomplete="off" class="layui-input"
                                               style="flex: 1;margin-right: 8px;"/>
                                        <input
                                                type="checkbox" name="check6" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item"><label class="layui-form-label">第七路(地址位07）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text" name="line7"
                                               placeholder="请输入第七路电路别称，默认名称第七路"
                                               autocomplete="off" class="layui-input"
                                               style="flex: 1;margin-right: 8px;"/>
                                        <input
                                                type="checkbox" name="check7" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item"><label class="layui-form-label">第八路(地址位08）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text" name="line8"
                                               placeholder="请输入第八路电路别称，默认名称第八路"
                                               autocomplete="off" class="layui-input"
                                               style="flex: 1;margin-right: 8px;"/>
                                        <input
                                                type="checkbox" name="check8" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item"><label class="layui-form-label">第九路(地址位09）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text" name="line9"
                                               placeholder="请输入第九路电路别称，默认名称第九路"
                                               autocomplete="off" class="layui-input"
                                               style="flex: 1;margin-right: 8px;"/>
                                        <input
                                                type="checkbox" name="check9" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item"><label class="layui-form-label">第十路(地址位0a）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text" name="line10"
                                               placeholder="请输入第十路电路别称，默认名称第十路"
                                               autocomplete="off" class="layui-input"
                                               style="flex: 1;margin-right: 8px;"/>
                                        <input
                                                type="checkbox" name="check10" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item"><label class="layui-form-label">第十一路(地址位0b）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text" name="line11"
                                               placeholder="请输入第十一路电路别称，默认名称第十一路"
                                               autocomplete="off" class="layui-input"
                                               style="flex: 1;margin-right: 8px;"/>
                                        <input
                                                type="checkbox" name="check11" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item"><label class="layui-form-label">第十二路(地址位0c）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text" name="line12"
                                               placeholder="请输入第十二路电路别称，默认名称第十二路"
                                               autocomplete="off" class="layui-input"
                                               style="flex: 1;margin-right: 8px;"/>
                                        <input
                                                type="checkbox" name="check12" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item"><label class="layui-form-label">第十三路(地址位0d）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text" name="line13"
                                               placeholder="请输入第十三路电路别称，默认名称第十三路"
                                               autocomplete="off" class="layui-input"
                                               style="flex: 1;margin-right: 8px;"/>
                                        <input
                                                type="checkbox" name="check13" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item"><label class="layui-form-label">第十四路(地址位0e）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text" name="line14"
                                               placeholder="请输入第十四路电路别称，默认名称第十四路"
                                               autocomplete="off" class="layui-input"
                                               style="flex: 1;margin-right: 8px;"/>
                                        <input
                                                type="checkbox" name="check14" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item"><label class="layui-form-label">第十五路(地址位0f）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text" name="line15"
                                               placeholder="请输入第十五路电路别称，默认名称第十五路"
                                               autocomplete="off" class="layui-input"
                                               style="flex: 1;margin-right: 8px;"/>
                                        <input
                                                type="checkbox" name="check15" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item"><label class="layui-form-label">第十六路(地址位10）</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <input type="text" name="line16"
                                               placeholder="请输入第十六路电路别称，默认名称第十六路"
                                               autocomplete="off" class="layui-input"
                                               style="flex: 1;margin-right: 8px;"/>
                                        <input
                                                type="checkbox" name="check16" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button
                                                class="layui-btn layui-btn-sm" onclick="prevStep()">
                                            上一步
                                        </button>
                                        <button lay-submit="" lay-filter="lineSubmit"
                                                class="layui-btn layui-btn-sm layui-btn-normal">下一步
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
                <div class="item">
                    <div style="padding-top:40px;padding-right: 3em;text-align: center;">
                        <div class="time-container">
                            <div class="countdown-time"></div>
                            <div style="margin-top: 20px;">请在剩余时间内按以下步骤操作入网设备</div>
                        </div>
                        <div class="tip-container">
                            <div style="padding:8px 16px;display: none;" id="switcher">
                                在入网剩余时间内长按开关面板上任意按键5s左右，直到指示灯闪烁，放开后几秒即可入网。
                            </div>
                            <div style="padding:8px 16px;display: none;" id="curtain">
                                灯闪烁代表没有入网。在入网剩余时间内长按黑色按钮约6秒钟，直到灯常亮，放开后几秒即可入网。
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item ">
                    <div style="padding-top:40px;padding-right: 3em;text-align: center;">
                        <img src="./img/success.png" style="width: 200px;">
                        <div style="text-align: center;font-size: 2rem;margin-top: 12px;">入网成功</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/sha.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="lib/layui/layui.js"></script>
<script type="text/javascript" src="js/socket.io.js"></script>
<script>
    let dev_type = null;
    let lineNum = 0;
    let checkedLine=[];
    let cStep = 0;
    let leftTime;
     let joined=false;
    let countdownTimer=null
    if(window.WebSocket){
        socket = new WebSocket("ws://"+window.location.hostname+":8899/websocket");

        socket.onmessage = function(event){
 var revObj = JSON.parse(event.data);
            if (revObj.index == '5c12') {
                if (revObj.sub == '07') {
                    if (revObj.data == "00") {
                        reTimer();
                    }
                }
            } else if (revObj.cmd == '2098') {
                if (revObj.index == "0000") {
                    if (revObj.sub == "00") {
                    if(joined){
                      return ;
                    }
                    joined=true

                        //mac地址
                        var source = revObj.source;
                        //入网成功，保存设备数据
                        httpPost('iot/zigbee/device/save',{
                            dev_type:dev_type,
                            checkedLine:checkedLine,
                            mac:source
                        },function(res){
                            if(res.code===0){
                                parent.reloadTable()
                                nextStep()
                            }
                        })
                    }
                }
            }
        };

        socket.onopen = function(event){
console.log("打开WebSoket 服务正常，浏览器支持WebSoket!"+"\r\n")
        };

        socket.onclose = function(event){
console.log("WebSoket close")
        };
    }else{
          alert("您的浏览器不支持WebSocket协议！");
    }
    layui.use(['form', 'layer'], function () {

        var form = layui.form;
        form.on('submit(typeSubmit)', function (data) {
            var type = data.field.type;
            switch (type) {
                case "0":
                    dev_type = "zigbee-switcher-s"
                    lineNum = 1
                    break;
                case "1":
                    dev_type = "zigbee-switcher"
                    lineNum = 2
                    break;
                case "2":
                    dev_type = "zigbee-switcher-t"
                    lineNum = 3
                    break;
                case "4":
                    dev_type = "zigbee-airctrl"
                    lineNum = 1
                    break;
                case "3":
                    dev_type = "zigbee-curtain"
                    lineNum = 1
                    break;
                case "5":
                    dev_type = "airctrl-zigbee-leectrl"
                    lineNum = 1
                    break;
            }
            nextStep()
            return false;
        });

        form.on('submit(lineSubmit)', function (data) {
            var field = data.field
            checkedLine = [];
            var lineTags = ["第一路", "第二路", "第三路", "第四路", "第五路", "第六路","第七路", "第八路", "第九路", "第十路", "第十一路", "第十二路", "第十三路", "第十四路", "第十五路", "第十六路"]
            for (var i = 1; i <= 16; i++) {
                if (field['check' + i] === 'on') {
                    checkedLine.push({
                        line: i,
                        title: field['line' + i].length > 0 ? field['line' + i] : lineTags[i - 1]
                    })
                }
            }

            if (checkedLine.length != lineNum) {
                layer.msg("请勾选设备接入的" + lineNum + "路线路")
                return false
            }
            nextStep()
            return false;
        });
    });

    function nextStep() {
        cStep++;
        $('.s-step .s-circle').removeClass("active")
        $($('.s-step .s-circle')[cStep]).addClass("active")
        $('#Carousel_item .item').removeClass("layui-this")
        $($('#Carousel_item .item')[cStep]).addClass("layui-this")
        if(cStep==2){

            if(dev_type==="zigbee-switcher"||dev_type==='zigbee-switcher-t'){
                $("#switcher").show();
            }else if(dev_type==="zigbee-curtain"){
                $("#curtain").show();
            }
            httpPost('iot/gateway/join',{},function(res){
            })
        }
    }


    function reTimer(){
        leftTime=120
        if(countdownTimer){
            clearInterval(countdownTimer);
        }
        $(".countdown-time").css("font-size",'3rem');
        $(".countdown-time").html(leftTime+"秒")
        countdownTimer=setInterval(function(){
            leftTime--;
            if(leftTime>0){
                $(".countdown-time").html(leftTime+"秒")
            }else{
                clearInterval(countdownTimer)
                $(".countdown-time").css("font-size",'1.2rem');
                $(".countdown-time").html("<a onclick='reJoin()'>重新入网</a>")
            }
        },1000)
    }


    function reJoin(){
        httpPost('iot/gateway/join',{},function(res){

        })
    }

    function prevStep() {
        cStep--;
        $('.s-step .s-circle').removeClass("active")
        $($('.s-step .s-circle')[cStep]).addClass("active")
        $('#Carousel_item .item').removeClass("layui-this")
        $($('#Carousel_item .item')[cStep]).addClass("layui-this")
    }

</script>
</body>
</html>